<template>
	<view class="kaiCom">
        <view class="head flex">
            <view class="titles flex col-3e font15 fontBold">
                户型图({{list.length}})
                <!-- <view class="tipBox flex" @click="clickTip">
                    <text class="icon bg"></text>
                    <text class="tip font11 col-theme">户型图攻略</text>
                </view> -->
            </view>
            <view class="more flex col-grey font12" @click="toMore">
                <text class="txt">查看更多</text>
                <view class="icon"><u-icon name="arrow-right" color="#8A8A8A" size="12"></u-icon></view>
            </view>
        </view>
        <scroll-view class="scrollBox top-15" scroll-x="true">
            <block v-for="(item,index) in list" :key="index">
                <view class="scrollItem col-4d font13">
                    <image class="typeImg" :src="item.image_list[0].url" mode="heightFix" @click="previewImg(index)"></image>
                    <view class="msgBox col-4d font12">
                        <view class="type fontBold" v-if="item.size_code_display">{{item.size_code_display}}</view>
                        <block v-if="item.build_size_range">
                            建面约{{item.build_size_range}}m²
                        </block>
                    </view>
                </view>
            </block>
        </scroll-view>
        <!-- <view class="vrMore top-10 bottom-10 text-center font15 fontBold col-theme bg-orange-opacity" @click="toMoreVR">
            点击使用VR带看
        </view> -->
	</view>
</template>

<script>
    import { mapState } from 'pinia';
    import { useConfigStore } from '@/store/index';
	export default {
		props: {
            kaiId: {
                value: [String, Number],
                default: ''
            },
            list: {
                value: Array,
                default: []
            },
            product: {
                value: Object,
                default: {}
            }
		},
        computed:{
            ...mapState(useConfigStore, ['puid']),
            
            imagesList: function() {
                return this.list.map(item => {
                    return item.image_list[0].url
                })
            }
        },
        methods:{
            clickTip(){
                this.$emit("bindTips")
            },
            previewImg(index){
                uni.previewImage({
                    current: index,
                	urls: this.imagesList,
                	longPressActions: {
                		itemList: ['发送给朋友', '保存图片', '收藏']
                	}
                })
            },
            toMore(){
                uni.navigateTo({
                    url: `/pages/product/house-type/list/page?productId=${this.product.id}&kaiId=${this.kaiId}&title=${this.product.title}&type=types&puid=${this.puid}&prepage=楼盘详情页-${this.product.id}-${this.product.title}`
                })
            },
            toMoreVR() {
                uni.navigateTo({
                    url: `/pages/house/vr-list?productId=${this.product.id}&kaiId=${this.kaiId}&title=${this.product.title}&puid=${this.puid}&prepage=楼盘详情页-${this.product.id}-${this.product.title}`
                })
            }
        }
	}
</script>

<style lang="scss" scoped>
	.kaiCom{
        line-height: 1;
        margin: 50rpx 22rpx 0 22rpx;
        .head{
            justify-content: space-between;
            .titles{
                justify-content: flex-start;
                .tipBox{
                    margin-left: 20rpx;
                    height: 40rpx;
                    padding: 0rpx 20rpx;
                    border-radius: 20rpx;
                    background-color: $yellow-opacity;
                    .icon{
                        width: 24rpx;
                        height: 24rpx;
                        background-image: url("https://image.srea.org.cn/xcx/icon/icon-house-type-img.png");
                    }
                    .tip{
                        margin-left: 10rpx;
                    }
                }
            }
            .more{
                justify-content: flex-end;
            }
        }
        .scrollBox{
            height: 370rpx;
            white-space: nowrap;
            .scrollItem{
                display: inline-block;
                margin-right: 50rpx;
                &:last-child{
                    margin-right: 0;
                }
                .typeImg{
                    height: 240rpx;
                    /* #ifdef MP-TOUTIAO || MP-BAIDU */
                    width: 150rpx;
                    /* #endif */
                }
                .msgBox{
                    margin-top: 37rpx;
                    .type{
                        margin-bottom: 10rpx;
                    }
                }
            }
        }
        .vrMore{
            height: 80rpx;
            line-height: 80rpx;
        }
    }
</style>
